<template>
  <div class="chart-container">
    <div class="chart-header">
      <div class="chart-title">文章分类统计</div>
      <div class="chart-subtitle">按文章类型统计分布</div>
    </div>
    <div ref="chartRef" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ArticleCategoryChart',
  data() {
    return {
      chart: null
    }
  },
  methods: {
    initChart() {
      if (!this.$refs.chartRef) return

      if (this.chart) {
        this.chart.dispose()
      }

      this.chart = echarts.init(this.$refs.chartRef)
      const option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: 'rgba(0, 0, 0, 0.1)',
          borderWidth: 1,
          padding: [8, 12],
          textStyle: {
            color: '#333'
          },
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          top: 'bottom',
          itemWidth: 25,
          itemHeight: 14,
          itemGap: 30,
          textStyle: {
            fontSize: 12
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          },
          right: 20,
          top: 20
        },
        series: [
          {
            name: '文章分类',
            type: 'pie',
            radius: ['20%', '65%'],
            center: ['50%', '45%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 4
            },
            label: {
              show: false
            },
            data: [
              { value: 40, name: '技术博客' },
              { value: 38, name: '前端开发' },
              { value: 32, name: '后端开发' },
              { value: 30, name: '项目实战' },
              { value: 28, name: '算法笔记' },
              { value: 26, name: '开发工具' },
              { value: 22, name: '生活随笔' },
              { value: 18, name: '其他分类' }
            ]
          }
        ]
      }

      // 设置颜色
      option.series[0].data = option.series[0].data.map((item, index) => {
        const colors = [
          '#6C8FF7',  // 技术博客
          '#8FD460',  // 前端开发
          '#FFD66C',  // 后端开发
          '#FF7B7B',  // 项目实战
          '#65D5FF',  // 算法笔记
          '#4CAF8C',  // 开发工具
          '#FF9666',  // 生活随笔
          '#B98BDD'   // 其他分类
        ];
        return {
          ...item,
          itemStyle: {
            color: colors[index]
          }
        };
      });

      this.chart.setOption(option)
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
      window.addEventListener('resize', this.handleResize)
      
      // 监听父容器大小变化
      if (typeof ResizeObserver !== 'undefined') {
        const observer = new ResizeObserver(this.handleResize)
        observer.observe(this.$refs.chartRef)
        this.$once('hook:beforeDestroy', () => {
          observer.disconnect()
        })
      }
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  }
}
</script>

<style lang="less" scoped>
.chart-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;

  .chart-header {
    padding: 20px 20px 0;
    flex-shrink: 0;

    .chart-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      margin-bottom: 4px;
    }

    .chart-subtitle {
      font-size: 12px;
      color: #999;
    }
  }

  .chart {
    flex: 1;
    width: 100%;
    height: calc(100% - 70px);
    position: relative;
  }
}

@media screen and (max-width: 768px) {
  .chart-container {
    .chart-header {
      padding: 16px 16px 0;

      .chart-title {
        font-size: 14px;
      }

      .chart-subtitle {
        font-size: 11px;
      }
    }
  }
}
</style> 